import type { FiveOneCtoElements } from '../../../../../../types/constants'
import type {
  ApplyHeadingStyleOptions,
  ThemeFutureOptions,
  ThemeType,
} from '../../../../../../types/interfaces'
import { BlogThemeService } from '../../../../../../lib/abstract'
import { DEFAULT_COPY_BUTTON_ID } from '../../../../../../module/page_enhancer/content/copy_protection'
import { AppStyleCollections, BODY_SELECTOR, PLATFORM_PAGE_TYPES, PROJECT_PREFIX, SUPPORTED_PLATFORMS } from '../../../../../../types/constants'
import { PAGE_CONTENT_WIDTH } from '../../../../../../types/constants/offical'

// TODO: 处理流程图
export class FiveOneCtoThemeService extends BlogThemeService {
  readonly name = '51ctoTheme'
  readonly platformPageType: string = PLATFORM_PAGE_TYPES.BLOG.value
  private static instance: FiveOneCtoThemeService
  readonly futureOptions: ThemeFutureOptions = {
    copyRightButton: true,
  }

  readonly articleSelector = '.article-detail .article-content-wrap .main-content'
  declare readonly elements: FiveOneCtoElements
  readonly wrapperSelector: string = `${BODY_SELECTOR} .Content-box .Content`
  readonly pageWidth: string = PAGE_CONTENT_WIDTH
  readonly applyHeadingStyleOptions: ApplyHeadingStyleOptions = {
    timeout: 1500,
    condition: !!document.querySelector('#markdownContent'),
  }

  constructor() {
    super(SUPPORTED_PLATFORMS.FIVE_ONE_CTO)

    this.checkEnv()
    this.initExcludedTitleElementsSelectors(this.excludedTitleElementsSelectors)
    this.updateElementStylesForTheme()
  }

  /**
   * 获取单例实例
   */
  static getInstance(): FiveOneCtoThemeService {
    if (!FiveOneCtoThemeService.instance) {
      FiveOneCtoThemeService.instance = new FiveOneCtoThemeService()
    }
    return FiveOneCtoThemeService.instance
  }

  updateElementStylesForTheme(): void {
    super.updateElementStylesForTheme()

    // 处理版权按钮
    const $copyrightBtn = $('#copyright-btn')
    const copyrightContent = $copyrightBtn.text()
    $copyrightBtn.text(copyrightContent.replace(/©|&copy;/g, ''))
  }

  platformStyleVar(_theme: ThemeType): string {
    return ``
  }

  getPageStyles(_theme: ThemeType): string {
    return `
${this.wrapperSelector} {
  background: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
  padding: 0 0 30px !important;
}

${BODY_SELECTOR}.${AppStyleCollections.Wallpaper.EXISTS} .Content-box .Content {
  background: transparent !important;
}
`
  }

  getMainStyles(theme: ThemeType): string {
    const { CONTENT_CONTAINER, INFO_CONTAINER } = this.elements

    let contentContainerStyle = ''
    if (CONTENT_CONTAINER && CONTENT_CONTAINER.selector !== '') {
      contentContainerStyle = `
${CONTENT_CONTAINER.selector} {
  width: ${this.pageWidth} !important;
  margin: 0 auto !important;
}
`
    }

    return `
${contentContainerStyle}

/* 文章元数据垂直对齐 */
${INFO_CONTAINER.selector} {
  .mess-line1 {
    display: flex !important;
    align-items: center !important;
    line-height: 1.8 !important;
    
    #copyright-btn {
      margin-left: auto !important;
      padding: 0 4px !important;
    }
  }
}

/* 版权按钮 */
${this.getCopyrightButtonStyles(theme)}

/* 下载按钮 */
.code-toolbar .hljs-cto .operation_box .downloadCode {
  background-color: transparent !important;
  color: var(--${PROJECT_PREFIX}-theme-code-text-common) !important;
}

/* 复制按钮 */
#${DEFAULT_COPY_BUTTON_ID} {
  color: var(--${PROJECT_PREFIX}-theme-code-text-common) !important;
}
#${DEFAULT_COPY_BUTTON_ID} {
  background-color: transparent !important;
}

${CONTENT_CONTAINER.selector} {
  /* 文章按钮 */
  .action-box ul li strong a {
    background: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
    border: 1px solid var(--${PROJECT_PREFIX}-theme-bg-surface) !important;
    box-shadow: none !important;
  }
  
  /* 上一篇/下一篇 */
  .lists p a {
    color: var(--${PROJECT_PREFIX}-theme-secondary) !important;
    
    &:hover {
      color: var(--${PROJECT_PREFIX}-theme-primary) !important;
    }
  }
}
`
  }

  getPatchedStyles(_theme: ThemeType): string {
    const { ARTICLE_CONTAINER } = this.elements

    return `
/* 文章居中 */   
#page_center {
  display: flex !important;
  justify-content: center !important;
  
  .detail-content-right {
    width: 0 !important;
  }
}

/* 去掉预览区域的滚动条 */
.editor-preview-side {
  overflow: unset !important;
}

/* 隐藏顶部固定标题 */    
.fixtitle {
  display: none !important;
}

.code-toolbar {
  box-shadow: none !important; /* 去掉代码块包裹的阴影 */
  margin-top: 0.5rem !important;
}

/* 去掉文章容器底部边框 */
${ARTICLE_CONTAINER.selector} {
  border-bottom: none !important;
}
  `
  }

  getFixedStyles(_theme: ThemeType): string {
    return ``
  }
}
